前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 前言

通过上一章的项目分析与设计之后接下来将进入项目开发阶段,在开发项目之前先一起学习下 Egg 的基本开发。

如果对 Egg 熟悉的同学,本章可以快速阅读或跳过,如果对 Egg 不熟悉的同学,可以帮你快速熟悉 Node 开发,顺便过度,避免踩坑。

本章将介绍 Egg 的基本配置与使用,阅读本章将会逐渐熟悉服务端开发与部分 Egg 插件的使用。

# 目录介绍

image.png

上图是第一次初始化的目录,那么对于 Egg 来说,还有一些由框架约定的目录:

  • app/router.js 用于配置 URL 路由规则;
  • app/controller/** 用于解析用户的输入,处理后返回相应的结果;
  • app/service/** 用于编写业务逻辑层;
  • app/middleware/** 用于编写中间件;
  • app/public/** 用于放置静态资源;
  • app/extend/** 用于框架的扩展;
  • config/config.{env}.js 用于编写配置文件;
  • config/plugin.js 用于配置需要加载的插件;
  • test/** 用于单元测试;
  • app.js 和 agent.js 用于自定义启动时的初始化工作,可选,具体参见启动自定义。

在后面的配置介绍中,将逐一使用到上述的部分目录。

# 编写一个 Hello World!

image.png

修改 ctx.body = 'Hello World!';,然后刷新页面即可。

# 控制器(Controller)

Controller 的定义是负责解析用户的输入,处理后返回相应的结果。

所以修改了 ctx.body 也就修改了返回给页面的结果。

# 接受参数

# 1. Query

在 URL 中 ? 后面的部分是一个 Query String,这一部分经常用于 GET 类型的请求中传递参数。

controller/home.ts 可以使用 ctx.query 接受 query 参数。

ctx.body = `Hello ${ctx.query.name}!`;
@前端进阶之旅: 代码已经复制到剪贴板

浏览器输入: http://127.0.0.1:7001/?name="cookie"

image.png

# 2. Queries

正常情况下,Query String 是不会重复的,但是在查询的时候,也有可能出现同 key 多值的问题,所以 Egg 可以使用 queries 来获取这种参数,将相同 key 的值取出来作为数组传递。

ctx.body = `Hello ${ctx.queries.name.join(',')}!`;
@前端进阶之旅: 代码已经复制到剪贴板

浏览器输入: http://127.0.0.1:7001/?name="cookie"&name="boty"

image.png

# 3. Router params

如果对 RESTful 有印象的话,应该有这种需求

ctx.body = `Hello ${ctx.params.name}!`; // 修改 app/controller

router.get('/:name', controller.home.index); // 修改 router.ts
@前端进阶之旅: 代码已经复制到剪贴板
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏